﻿<div class="tabbable tabs-below breadcrumb">
    <div class="breadcrumb"><h4>Search</h4></div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#lAHome" data-toggle="tab"><strong>Companies</strong></a></li>
        <li><a href="#lBHome" data-toggle="tab"><strong>Candidates</strong></a></li>
        <li><a href="#lCHome" data-toggle="tab"><strong>Positions</strong></a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="lAHome" data-bind="with: company">
            <div data-bind = "with: companyAdvancedSearch">
                <div class="row">
                    <span style="margin-left: 30px">Search type</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="value: $root.searchTypeCompanies">
                        <option value="all">Match all criteria</option>
                        <option value="some">Match any criteria</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <span style="margin-left: 30px">Keyword(s)</span>
            </div>
            <div class="row">
                <input type="text" style="margin-left: 30px" id="keywordsAutocomplete"/>
            </div>
            <div data-bind = "with: companyAdvancedSearch">
                <div class="row">
                    <span style="margin-left: 30px">Industry</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="options: $root.availableIndustries, optionsText: 'Description', value : $root.selectedIndustryCompany, optionsCaption: '- Select Industry -'"></select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Location</span>
                </div>
                <div class="row">
                    <input type="text" style="margin-left: 30px" data-bind="value: Location"/>
                </div>
                <div class="row">
                    <button style="margin-left: 30px" class="btn btn-info" data-bind="click: function(){ $root.simpleSearchCompanies() }"><strong>Search</strong></button>
                </div>
                <div class="row">
                    <a href="#" style="margin-left: 30px" data-bind="click: function(){ $root.advancedSearchCompanies() }"><span style="font-size: smaller">Advanced search</span></a>
                </div>
            </div>
            <input type="text" id="tags"/>
        </div>

        <div class="tab-pane" id="lBHome"  data-bind="with: profile">
            <div data-bind = "with: profileAdvancedSearch">
                <div class="row">
                    <span style="margin-left: 30px">Search type</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="value: $root.searchTypeExperts">
                        <option value="all">Match all criteria</option>
                        <option value="some">Match any criteria</option>
                    </select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Keyword(s)</span>
                </div>
                <div class="row">
                    <input type="text" style="margin-left: 30px" data-bind="value: Keywords"/>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Industry</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="options: $root.availableIndustries, optionsText: 'Description', value : $root.selectedIndustryExpert, optionsCaption: '- Select Industry -'"></select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Job type</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="value: JobType">
                        <option value="0"></option>
                        <option value="1">Permanent</option>
                        <option value="2">Freelancer</option>
                    </select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Location</span>
                </div> 
                <div class="row">
                    <input type="text" readonly="readonly" style="margin-left: 30px" data-bind="value: Location"/>
                    <a href="#SelectLocationDialog" data-toggle="modal" data-bind="click: function(){ $root.profile.selectSelectLocation() }"><span style="font-size: smaller">Select Location</span></a>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Distance</span>
                </div> 
                <div class="row">
                    <input type="text" style="margin-left: 30px" data-bind="value: Distance"/>
                </div>
                <div class="row">
                    <button style="margin-left: 30px" class="btn btn-info" data-bind="click: function(){ $root.profile.generateRoute() }"><strong>Search</strong></button>
                </div>
                <div class="row">
                    <a href="#" style="margin-left: 30px" data-bind="click: function(){ $root.advancedSearchExperts() }"><span style="font-size: smaller">Advanced search</span></a>
                </div>
            </div>
        </div>

        <div class="tab-pane" id="lCHome" data-bind="with: Position">
            <div data-bind="with: PositionAdvancedSearch">
                <div class="row">
                    <span style="margin-left: 30px">Search type</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="value: $root.searchTypePositions">
                        <option value="all">Match all criteria</option>
                        <option value="some">Match any criteria</option>
                    </select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Keyword(s)</span>
                </div>
                <div class="row">
                    <input type="text" style="margin-left: 30px" data-bind="value: Keywords"/>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Industry</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="options: $root.availableIndustries, optionsText: 'Description', value : $root.selectedIndustryExpert, optionsCaption: '- Select Industry -'"></select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Contract type</span>
                </div>
                <div class="row">
                    <select style="margin-left: 30px" data-bind="value: JobType">
                        <option></option>
                        <option value="1">Permanent</option>
                        <option value="2">Freelancer</option>
                    </select>
                </div>
                <div class="row">
                    <span style="margin-left: 30px">Location</span>
                </div> 
                <div class="row">
                    <input type="text" style="margin-left: 30px" data-bind="value: Location"/>
                </div>
                <div class="row">
                    <button style="margin-left: 30px" class="btn btn-info" data-bind="click: function(){ $root.simpleSearchPositions() }"><strong>Search</strong></button>
                </div>
                <div class="row">
                    <a href="#" style="margin-left: 30px" data-bind="click: function(){ $root.advancedSearchPositions() }"><span style="font-size: smaller">Advanced search</span></a>
                </div>
            </div>
        </div>
    </div>
</div>
@Html.Partial("Home/SelectLocation")

@*<script type="text/javascript">
     $(function() {
         var availableTags = [
             "ActionScript",
             "AppleScript",
             "Asp",
             "BASIC",
             "C",
             "C++",
             "Clojure",
             "COBOL",
             "ColdFusion",
             "Erlang",
             "Fortran",
             "Groovy",
             "Haskell",
             "Java",
             "JavaScript",
             "Lisp",
             "Perl",
             "PHP",
             "Python",
             "Ruby",
             "Scala",
             "Scheme"
         ];
         function split(val) {
             return val.split(/,\s*/);
         }
         function extractLast(term) {
             return split(term).pop();
         }

         $("#keywordsAutocomplete")
         // don't navigate away from the field on tab when selecting an item
			.bind("keydown", function (event) {
			    if (event.keyCode === $.ui.keyCode.TAB &&
						$(this).data("autocomplete").menu.active) {
			        event.preventDefault();
			    }
			})
			.autocomplete({
			    minLength: 0,
			    source: function (request, response) {
			        // delegate back to autocomplete, but extract the last term
			        response($.ui.autocomplete.filter(
						availableTags, extractLast(request.term)));
			    },
			    focus: function () {
			        // prevent value inserted on focus
			        return false;
			    },
			    select: function (event, ui) {
			        var terms = split(this.value);
			        // remove the current input
			        terms.pop();
			        // add the selected item
			        terms.push(ui.item.value);
			        // add placeholder to get the comma-and-space at the end
			        terms.push("");
			        this.value = terms.join(", ");
			        return false;
			    }
			});
     });
	</script>*@